<template>

  <div class="all">

    <div class="detail_all" >
      <img :src=isrc alt="点击失败">

    </div>
    <div class="alter_sale">
        <div class="sale">30天无忧退货</div>
        <div class="sale">48小时快速退费</div>
        <div class="sale">满88元免邮费</div>
    </div>
    <br>
    <div class="pro-info">
      <div class="info1">{{ name }}</div>
      <div class="info2">{{sweet}}</div>
      <div class="info3">￥{{money}}元</div>
    </div>
    <hr style="background-color: #EEEEEE;height: 20px;">
    <div class="alter_protect">售后保障  </div>
    <hr style="background-color: #EEE;height: 20px;">
    <div class="bottom">
      <div class="question">-常见问题-</div>
   </div>
   <ul>
          <li>
            <h3>购买运费如何收取？</h3>
            <p class="p">1.单笔订单金额(不含运费)满88元免邮费;不满88元,每单收取10元运费。港澳台地区需满</p>
          </li>
          <li>
            <h3>使用什么发货？</h3>
            <p class="p">1.严选默认使用顺丰快递发货（个别商品使用其他快递），配送范围覆盖全国大部分地区（港澳台地区除</p>
          </li>
          <li>
            <h3>如何申请退货？</h3>
            <p class="p"> 1.自收到商品之日起30日内,顾客可申请无忧退货,退款将原路返还,不同的银行处理时间不同</p> 
          </li>
          <li>
            <h3>如何开具发票？</h3>
            <p class="p">1.如需开具普通发票，请在下单时选择“我要开发票”并填写相关信息(APP仅限2.4.0及以下)</p>
          </li>
      </ul>
      <hr style="background-color: #EEE;height: 20px;">
      <div class="like">
          猜你喜欢
      </div>
      <div class="like_1" v-for="(item,index) in Goods" :key="index" style="cursor: pointer">
        <div style="float: left;">
            <img  v-bind:src="Goods[index].list_pic_url" @click="fun5(Goods[index].id)" alt="">
             <strong v-text="Goods[index].name" style="display: block;text-align: center;"></strong>
             <b style="color: red;margin: 75px;font-size: 15px;">￥
            <span v-text="Goods[index].retail_price" style="text-align: center;"></span>
          元</b>
          </div>
      </div>
  </div>

</template>


<script>
 import { getProductsDetail } from '@/api';
 import { getProductslike } from '@/api';

  export default{
    async mounted(){
      this.id3 = this.$route.query.id;
      await this.change2(this.id3);
      await this.change3(this.id3);
    },
    data(){
      return{
        Goods:[],
        id3:"",
        name:"",
        sweet:"",
        money:"",
        isrc:""
       
      }
    },
    methods:{
      async change2(id){ 
      const result = await getProductsDetail(id);
      console.log(result.data.data);
      this.name = result.data.data.info.name
      this.sweet = result.data.data.info.goods_brief
      this.money = result.data.data.info.retail_price
      this.isrc = result.data.data.info.list_pic_url
    },
    async change3(id3){
      const result1 = await getProductslike(id3);
      this.Goods = result1.data.data.goodsList;
      console.log(result1);
      console.log(this.Goods);
    },
    
    fun5:  function(id3){
      this.$router.push({name:"productsDetail",query:{id:id3}})
      location.reload();
    }
  },
 
  }
</script>

<style>
 
.all{
  width: 500px;
  display: block; /* 如果需要，可以强制设置为块级元素 */
  height: 1000px;
}
.detail_all{
    display: flex;
    width: 500px;
    height: 515px;
}
.detail_all img{
  width: 500px;
    height: 515px;
}
.alter_sale{
  display: inline-flex;
  background-color:#F1F1F1;
  width: 500px;
}
.sale{
  float: left;
  margin: 20px;
  margin-left: 50px;
 color: black;
 font-size: 14px;
text-align: center;
}
.info3{
  margin: 15px;
  color: red;
  font-size: 20px;
}
.info2{
  color: #999999;
  font-size: 20px;
  padding-left: 15px;
}
.info1{
  margin: 20px;
  font-size: 35px;
}
.alter_protect{
  font-size: 25px;
}
.question{
  text-align: center;
  font-size: 25px;
}
.p{
  font-size: 20px;
  color: #999999;
}
.like{
  text-align: center;;
  font-size: 20px;
  height: 50px;
}
.like_1{
  width: 510px;
}
.like_1 img{
  width: 250px;
  height: 200px;
}
</style>